묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
오류났을때 참고
안녕하세요 , 23년도에도 듣고 계신 분이 계실지는 모르겠지만.. 강의 들으면서 혹시 막히시는 부분들 제가 수업 들으면서 작성한 코드와 비교해서 본인이 작성한 어떤 부분이 잘못되었는지 확인하시면 문제해결에 도움이 될듯해서요 !birdflies 함수 작성에서 작은 따옴표가 아닌 ` <- 이 부분 (숫자 1 옆의 템플릿 리터럴 ) 활성화 > 비활성화가 되었을 때 다시 돌아오지 않는 부분 이였습니다.위 두가지에서 시간이 좀 잡아먹었는데 저와같은 분들이라면 제 js 랑 비교해보세요 ㅋㅋ( 이 부분은 애니메이션이 완전히 끝까지 완료 후 스크롤을 내려야 다시 활성화 되었을 때 애니메이션이 제자리에서 작동을 하더라구요. )html { font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; } div, section, header, footer, p, h1, h2 { box-sizing: border-box; } a { color: royalblue; } img { max-width: 100%; height: auto; } /* 배경이 되는 이미지들 */ .global-width{ max-width: 620px; margin: 0 auto; padding: 0 1rem; } .scroll-graphic{ overflow-x: hidden; position:sticky; top:0; height: 100vh; } .graphic-item{ display: flex; align-items: center; justify-content: center; position:absolute; left: 0; top:0; width: 100vw; height: 100vh; opacity: 0; transition: 0.5s; will-change: opacity; } .visible{ opacity: 1; } .scene-img{ max-height: 100vh; } .scroll-text{ position: relative; padding-bottom: 1px; } .step{ margin-bottom: 60vh; padding: 0.5rem 1rem; border-radius: 10px; border : 0.2px solid rgba(216,216,216,0.2); box-shadow: rgba(0,0,0,0.3)0 0 3px; background: rgba(255,255,255,0.8); } .bird{ position:absolute; left: 0; bottom:70%; width: 100px; transform:translateX(-100%); transition:1.5s 0.5s linear; } [data-index="5"] .bird{ left: 30%; bottom:30%; } .global-footer{ text-align: center; padding:2rem 0; } .strikethrough{ text-decoration: line-through; }// 전역변수 사용 회피 (() => { const actions = { birdFlies(key){ if (key) { document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; }else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key) { if (key) { document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)`; }else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries,observer)=>{ ioIndex = entries[0].target.dataset.index *1 ; console.log(ioIndex); }) for (let i = 0; i < stepElems.length; i++) { io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action) { currentItem.classList.add('visible'); if (action) { actions[action](true); } } function inactivate(action) { currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for (let i=ioIndex-1; i<ioIndex+2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight* 0.1 && boundingRect.top < window.innerHeight*0.8){ inactivate(currentItem.dataset.action); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load',()=>{ setTimeout (() => scrollTo(0,0),100); }) activate(); })();
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
PointerLockControls 물체 통과 문의드립니다
안녕하세요? 물리엔진과 관련된 내용인 것 같습니다강사님이 만드신 https://studiomeal.com/ 사이트에서는 책장이나 물건을 통과하지 못하게 설정을 되어 있는데, 혹시 물리엔진으로 어떻게 구현하는지 궁금합니다 ㅠ
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
질문드립니다.
안녕하세요. 해당 강의로 three.js를 처음 접하고 실제 프로젝트에 적용하여 원하는 결과물을 만들 수 있었습니다.좋은 강의 감사합니다.결과물을 발전시키는 도중 원하는 표현이 생겼는데 어떻게 구현하면 좋을지 아이디어를 얻고 싶어 문의를 남깁니다.아래와 비슷하게 특정 지역의 온도를 위치가 정해져 있고 동적으로 색이 바뀌는 기체로 표현하고 싶습니다.three.js의 Fog는 카메라 기준으로 안개가 생기는 방식이라 사용할 수 없을 것 같은데어떤 방식으로 접근하면 좋을까요? 감사합니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
OrbitControls가 VS code Live Server에서는 동작을 안합니다
씬,카메라, 조명, 지오메트리등등 모두 문제없이 생성되는데 OrbitControls를 임포트하면 vs code live server에선 구동을 안합니다 왜 그런가요? 콘솔창에서는 딱히 경고 메세지는 뜨지 않습니다. npm start로 서버를 구동하는것과 vs code 플러그인 live server에서 파일을 여는것과 어떤 차이가 있나요?
-
미해결웹 애니메이션을 위한 GSAP 가이드 Part.01
어몽이가 안나와요!! 저만 그럴까요?
안녕하세요!키프레임 파헤치기 실습예제에 어몽이가 안 나오는 데 저만 그럴 걸까요?ㅠㅠ 결과물 화면에 아무것도 뜨지 않습니다. 백그라운드에 있는 url 이미지는 열리는데 말이죠...
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 vanilla.html 질문합니다.
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ..scrollMove 라는 함수 매게변수에 moveY가 있는데요.moveY가 움직이는 y값이라고 하셨잖아요그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠?moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
three-to-cannon 라이브러리 추천합니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!좋은 강의와 커뮤니티를 통한 서포트 덕분에 배운 내용 잘 활용하고 있습니다.실제로 three.js 작업을 하게 되면 gltf 와 같이 이미 작업되어 있는 메쉬를 많이 사용하게 되는데여기에 물리엔진을 넣기 위해 cannon body를 만드는 일이 굉장히 번거롭습니다.저는 three-to-cannon이라는 라이브러리를 사용해 메쉬를 cannon이 사용하는 shape으로 변환하고 있습니다.여러 최적화 옵션도 있고 물리엔진을 적용하는 프로젝트에 사용해보시면 좋을 거 같습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에반응형 관련 강의도 있을까요 ㅠㅠ?gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
GSAP(트윈맥스) 라이센스 관련 질문 드립니다.
현재 강의에서 사용중인 트윈맥스 CDN은 무료 버전이라고 하셨는데,그럼 웹 에이전시 실무에서 해당 라이브러리를 라이센스 구매없이 프로젝트에 사용해도 문제없을까요?또한 GSAP최신버전을 사용해도 저작권 문제없을까요?GSAP 라이센스 관련 문서에는 (https://greensock.com/standard-license/)"고객이 사이트/제품을 만들기 위해 일회성 비용을 지불하는 경우에는 완전히 문제가 없으며 "무료" 라이선스에 따라 자격이 부여 됩니다. " 라는 문구가 있어서 문제가 없을것 같습니다만..... 오랫동안 실무에서 사용해오신 선생님의 생각을 여쭙고 싶습니다.답변 주시면 감사하겠습니다!
-
미해결디자이너의 스킬업을 위한 Lottie 완벽 이해하기
아이콘 클릭시 애니메이션 질문 드립니다.
안녕하세요강좌 잘 보고 있습니다.현 강좌에서는 아이콘 클릭시 애니메이션이 실행이 되는데아이콘 클릭시 클릭한 아이콘만 애니메이션 되고다른 아이콘들은 애니메이션이 안된 비활성화 상태로 하고 싶은데(맨 처음에 보여주신 에프터이펙트에서 제작한 예제처럼)script 처리를 어떻게 해주면 될까요미리 감사드립니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
4-3 함수선언방식 질문
function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */
-
해결됨애플 웹사이트 인터랙션 클론!
messageA_opacity_out 글자가 사라지지 않는 문제
강사님 안녕하세요. 특정 타이밍 스크롤 애니메이션 적용하기 2번째 시간 transform 적용하기 전까지 들었습니다. (13분쯤 ) opacity: 1;로 글자가 점점 나타나는 부분까지는 했는데 글자가 사라지지 않아 console 로 messageA_opacity_out을 찍어봤습니다. console 창에서는 messageA_opacity_out 숫자가 제대로 줄어드는데 글자는 사라지지가 않습니다. 앞뒤로 강의를 돌려서 반복해서 다시 들었으나 문제점을 찾지 못하여 질문을 드립니다. 답변해주시면 감사합니다! https://florentine-trombone-82f.notion.site/0398c6579ce64b948fae207605e623ad 따로 파일을 올릴 수 없어 페이지에 올려둡니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm start 가 되지 않을때 어떻게 하나요?
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 ㅁ문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래는 오류메시지 입니다. MACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm ERR! npm ERR! To see a list of scripts, run:npm ERR! npm run npm ERR! A complete log of this run can be found in:npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_42_44_373Z-debug-0.logMACui-MacBook-Air:02 mac$ n ltsbash: n: command not foundMACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm ERR! npm ERR! To see a list of scripts, run:npm ERR! npm run npm ERR! A complete log of this run can be found in:npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_43_52_792Z-debug-0.logMACui-MacBook-Air:02 mac$ npm startnpm ERR! code EJSONPARSEnpm ERR! path /Users/mac/Desktop/threejs/02/package.jsonnpm ERR! JSON.parse Unexpected token "{" (0x7B) in JSON at position 541 while parsing near "...: \"^0.143.0\"\n }\n}\n\n{\n \"name\": \"threejs..."npm ERR! JSON.parse Failed to parse JSON data.npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in:npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_45_27_810Z-debug-0.logMACui-MacBook-Air:02 mac$ npm webpack serve --progressUnknown command: "webpack"
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
여기서도 애니메이션이 저장이 안되네요..
본 영상하고 과정복습에서도 애니메이션이 저장이 안돼요ㅠㅠ 영상에서의 블렌더 내보내기하고 현재 사용하고 있는 블렌더 내보내기 과정에서 include 하는 화면이 조금 다르게 보이네요 ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
canvas 배경 색 질문입니다
캔버스를 로드하였을 때 저는 배경색이 하얀데 강사님 배경색은 왜 까만색인가요?
-
미해결애플 웹사이트 인터랙션 클론!
overflow-x:hidden을 사용했는데, 모바일 화면에서 우측이 잘리고 가로 스크롤이
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
-
미해결애플 웹사이트 인터랙션 클론!
스크롤이 적용이 안되는것같아요!ㅜㅜ
스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') }, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } console.log(sceneInfo); } function scrollLoop() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
얼굴을 그리려고 브러쉬로 그리는데
얼굴을 그리려고 브러쉬 검은색으로 해서 그리는데 얼굴 앞면에 그렸는데 색칠이 반대편에 됩니다... ㅠㅠ 그래서 반대편으로 돌려서 뒤통수에 색칠하면 이번엔 원래 얼굴쪽에 색칠이 되구요.. 관통되서 반대편에서 색칠되는데 이건 어떻게 하나요..? ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
STUDIOMEAL WORLD에서는...
안녕하세요!! 강의를 열심히 듣다가 갑자기 질문이 생겼습니다. 그리고 Pointerlook을 사용한 상태에서 클릭은 어떻게 하나요??ㅜㅜ 포인터도 사라져서 클릭을 어떻게 하는지요! 에러가 뜨는데요! pointerlock상태에서는 클릭이 안되는거 같아용... Studiomeal world에서 가운데에 FPS게임처럼 점 포인터?! 그런것두...혹시...! 어떻게 하나요? 강의 영상에서는 마인크래프트 스타일 컨트롤에서만 Pointerlook을 사용하시던데용!
-
해결됨애플 웹사이트 인터랙션 클론!
if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 값
if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 로 처리하는 부분이 동일하지 않나요?단순히 calcValues 도 하지 않기 위해서 if (scrollRatio <= 0.22) 와 같은 조건문이 있는걸까요?